<template>
  <section class="news">
    <div class="new">
      <div class="title">{{ newsDetail.title }}</div>
      <div class="sub">
        <span class="label">企业动态：</span>
        <span class="content">{{ toShowText(newsDetail.typeId) }}</span>
        <span class="label">浏览量：</span>
        <span class="content">{{ newsDetail.visitCount }}</span>
        <span class="label">时间：</span>
        <span class="content">{{ newsDetail.createdAt }}</span>
      </div>
      <div class="content" v-html="content"></div>
      <footer>
        <div class="page">
          <div class="pre" v-if="newsDetail.prevId">
            <el-link :underline="false" @click="toDetail(newsDetail.prevId)"
              ><span class="label">上一篇：</span
              >{{ newsDetail.prevTitle }}</el-link
            >
          </div>
          <div class="next" v-if="newsDetail.nextId">
            <el-link :underline="false" @click="toDetail(newsDetail.nextId)"
              ><span class="label">下一篇：</span
              >{{ newsDetail.nextTitle }}</el-link
            >
          </div>
        </div>
        <div class="btn">
          <el-button type="primary" plain @click="goback"
            >返回</el-button
          >
        </div>
      </footer>
    </div>
  </section>
</template>

<script>
import { getNewsDetail } from "@/api/api.js";
export default {
  name: "NewsDetail",
  data() {
    return {
      newsType: { 1: "企业动态", 2: "集团要闻", 3: "保利新闻", 4: "国资动态" },
      newsDetail: {},
    };
  },
  mounted() {
    this.getNewsDetail(this.$router.currentRoute.query.id);
  },
  computed: {
    content() {
      return "<p>" + this.newsDetail.description + "</p>";
    },
  },
  methods: {
    getNewsDetail(id) {
      getNewsDetail({ page: 1, id: id }).then((res) => {
        console.info("新闻详情", res);
        this.newsDetail = res.data;
      });
    },
    toShowText(typeId) {
      return this.newsType[typeId];
    },
    // 查看上一条下一条
    toDetail(id) {
      this.getNewsDetail(id);
    },
    goback() {
      this.$router.go(-1)
    },
  },
};
</script>

<style lang="scss" scoped>
.news {
  border-top: 1px solid #ebeef5;
  color: #303133;

  .new {
    width: 1200px;
    margin: auto;
    .title {
      margin-top: 40px;
      margin-bottom: 10px;
      font-size: 26px;
      line-height: 34px;
    }

    .sub {
      font-size: 16px;
      line-height: 21px;
      margin-bottom: 30px;

      .label {
        color: #909399;
      }

      .content:not(:last-child) {
        margin-right: 30px;
      }
    }

    footer {
      margin-top: 30px;
      padding-top: 30px;
      border-top: 1px solid #ebeef5;
      display: flex;
      justify-content: space-between;

      .page {
        .pre {
          text-align: left;
          margin-bottom: 10px;
        }

        .next {
          text-align: left;
        }

        ::v-deep .el-link {
          font-size: 16px;
          line-height: 21px;

          .label {
            color: #909399;
          }
        }
      }
    }
  }
}
</style>
